<!DOCTYPE html>
<html>
  <head>
    <title>dom2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		var trObj = null;
		function editUser(vthis){
			trObj = vthis.parentElement.parentElement;
			var td;
			$('#userName').val(""+trObj.cells[0].innerHTML);
			$('#userPwd').val(""+trObj.cells[1].innerHTML);
			
			//设置单选框的选中
			if(trObj.cells[2].innerHTML == "男"){
				$("input[name='userSex']").eq(1).attr("checked",false);
				$("input[name='userSex']").eq(0).attr("checked",true);
			}
			else{
				$("input[name='userSex']").eq(0).attr("checked",false);
				$("input[name='userSex']").eq(1).attr("checked",true);
			}
			
			//设置多选框的选中
			var str = trObj.cells[3].innerHTML.split(',');
			var checks = $('input[name="relax"]');
			for(var i=0; i<checks.length; i++){
				checks[i].checked = false;
			}
			for(var i=0; i<str.length; i++){
				switch(str[i]){
				case "阅读":
					checks[0].checked = true;
					break;
				case "游泳":
					checks[1].checked = true;
					break;
				case "篮球":
					checks[2].checked = true;
					break;
				}
			}

			//设置下拉框的选中
				var job = trObj.cells[4].innerHTML;
//				$('select[name="job"]').val(job);
//				$('select[name="job"]').find("option[value="+1+"]").attr("selected",true); 
				var sel = $('select[name="job"]');

				sel.find("option[value=0]").attr("selected",false); 
				sel.find("option[value=1]").attr("selected",false); 
				sel.find("option[value=2]").attr("selected",false); 
				sel.find("option[value=3]").attr("selected",false); 
				sel.find("option[value=4]").attr("selected",false); 
				switch(job){
				case "教师":
					sel.find("option[value=1]").attr("selected",true); 
					//sel.options[1].selected = true;
					break;
				case "电器工程师":
					sel.find("option[value=2]").attr("selected",true); 
					//sel.options[2].selected = true;
					break;
				case "财务":
					sel.find("option[value=3]").attr("selected",true); 
					//sel.options[3].selected = true;
					break;
				case "自由职业":
					sel.find("option[value=4]").attr("selected",true); 
					//sel.options[4].selected = true;
					break;
				default :
					sel.find("option[value=0]").attr("selected",true); 
					//sel.options[0].selected = true;
					break;
				}
		}
	function saveUser(){
		var name = $('#userName').val();
		var password = $('#userPwd').val();
		var sexFlag = $('input:radio:checked').val();
		var sex;
		if(sexFlag == 1){
			sex = "女";			
		}else{
			sex = "男"
		}
		var relaxFlag = [];
		var relax = [];
		var checks = $('input[name="relax"]');
		for(var i=0; i<checks.length; i++){
			if(checks[i].checked){
				relaxFlag.push(checks[i].value);
				switch (checks[i].value) {
				case "0":
					relax.push("阅读");	
					break;
				case "1":
					relax.push("游泳");	
					break;
				case "2":
					relax.push("篮球");	
					break;
				default:
					relax.push("");	
					break;
				}
			}
		}
		var jobFlag = $('select[name="job"] option:selected').val();
		var job;
		switch (jobFlag) {
		case "1":
			job="教师";	
			break;
		case "2":
			job="电气工程师";	
			break;
		case "3":
			job="财务";	
			break;
		case "4":
			job="自由职业";	
			break;
		default:
			job="请选择职业";	
			break;
		}
		trObj.cells[0].innerHTML = name;
		trObj.cells[1].innerHTML = password;
		trObj.cells[2].innerHTML = sex;
		trObj.cells[3].innerHTML = relax;
		trObj.cells[4].innerHTML = job;
	}

	function addUser(){
		var name = $('#userName').val();
		var password = $('#userPwd').val();
		var sexFlag = $('input:radio:checked').val();
		var sex;
		if(sexFlag == 1){
			sex = "女";			
		}else{
			sex = "男"
		}
		var relaxFlag = [];
		var relax = [];
		var checks = $('input[name="relax"]');
		alert($('input[name="relax"]').attr("type"))
		for(var i=0; i<checks.length; i++){
			if(checks[i].checked){
				relaxFlag.push(checks[i].value);
				switch (checks[i].value) {
				case "0":
					relax.push("阅读");	
					break;
				case "1":
					relax.push("游泳");	
					break;
				case "2":
					relax.push("篮球");	
					break;
				default:
					relax.push("");	
					break;
				}
			}
		}
		var jobFlag = $('select[name="job"] option:selected').val();
		var job;
		switch (jobFlag) {
		case "1":
			job="教师";	
			break;
		case "2":
			job="电气工程师";	
			break;
		case "3":
			job="财务";	
			break;
		case "4":
			job="自由职业";	
			break;
		default:
			job="请选择职业";	
			break;
		}
		var userTable = $('#userTable');
		//userTable.append("<tr><td>sss</td></tr>");
		userTable.append("<tr> <td>"+name+"</td> <td>"+password+"</td> <td>"+sex+"</td> <td>"+relax+"</td> <td>"+job+"</td><td><input type='button' value='修改' onclick='editUser(this);'/></td></tr>");
		
	}
	</script>
  </head>
  
  <body>
     <table id="userTable" border="1">
     		<tr>
    			<td>用户名</td>
    			<td>密码</td>
    			<td>性别</td>
    			<td>爱好</td>
    			<td>工作</td>
    			<td>操作</td>
    		</tr>
    		<tr>
    			<td>张三</td>
    			<td>123456</td>
    			<td>男</td>
    			<td>阅读,篮球</td>
    			<td>自由职业</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
    		<tr>
    			<td>李娜</td>
    			<td>111111</td>
    			<td>女</td>
    			<td>游泳</td>
    			<td>财务</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
    		<tr>
    			<td>李四</td>
    			<td>111564</td>
    			<td>男</td>
    			<td>游泳,篮球</td>
    			<td>教师</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
     </table>
     <p></p>
     <form action="formResult.html" name="userForm" method="get">
    	<table>
    		<tr>
    			<td>用户名：</td>
    			<td><input id="userName" type="text" name="userName" value=""/></td>
    		</tr>	
    		<tr>
    			<td>密码：</td>
    			<td><input id="userPwd" type="password" name="userPwd" value=""/></td>
    		</tr>
    		<tr>
    			<td>性别：</td>
    			<td><input type="radio" name="userSex" value="0" >男 
    				<input type="radio" name="userSex" value="1" >女 </td>
    		</tr>
    		<tr>
    			<td>爱好：</td>
    			<td><input type="checkbox" name="relax" value="0" >阅读
    				<input type="checkbox" name="relax" value="1" >游泳
    				<input type="checkbox" name="relax" value="2" >篮球</td>
    		</tr>  
    		<tr>
    			<td>工作：</td>
    			<td><select name="job" >  <!-- size="5" multiple -->
    					<option value="0" >请选择职业</option>
    					<option value="1" >教师</option>
    					<option value="2" >电器工程师</option>
    					<option value="3" >财务</option>
    					<option value="4">自由职业</option>
    			    </select></td>
    		</tr>   
    		<tr>
    			<td colspan="2" align="center"> 
     			<input type="button" value="添加用户" onclick="addUser()"/>
     			<input type="reset" value="清空" />
    			<input type="button" value="保存" onclick="saveUser();"/></td>
    		</tr>
    	</table>
    </form>
  </body>
</html>
